<template>
  <a-modal
    :visible="show"
    @cancel="$emit('update:show', false)"
    :on-before-ok="handleOk"
  >
    <template #title>
      <a-space>
        <a-icon v-if="props.action === 'add'" type="plus" />
        <a-icon v-else type="edit" />
        <span>{{ props.action === 'add' ? '添加' : '编辑' }}赛事</span>
      </a-space>
    </template>
    <a-form :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-item label="赛事名称" name="matchName">
        <a-input v-model="form.matchName" />
      </a-form-item>
      <a-form-item label="赛事类型" name="matchType">
        <a-select v-model="form.matchType">
          <a-option value="1">积分赛</a-option>
          <a-option value="2">常规赛</a-option>
          <a-option value="3">定段赛</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="开始时间" name="startTime">
        <a-date-picker
          v-model="form.startTime"
          showTime
          :default-value="Date.now()"
        />
      </a-form-item>
      <a-form-item label="结束时间" name="endTime">
        <a-date-picker
          v-model="form.endTime"
          showTime
          :default-value="Date.now()"
        />
      </a-form-item>
      <a-form-item label="项目列表" name="itemList">
        <a-select multiple v-model="form.itemList">
          <a-option v-for="k in raceList.keys()" :key="k" :value="k">
            {{ raceList.get(k) }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="赛程列表" name="scheduleList">
        <a-select multiple v-model="form.scheduleList">
          <a-option value="1">初赛</a-option>
          <a-option value="2">复赛</a-option>
          <a-option value="3">半决赛</a-option>
          <a-option value="4">决赛</a-option>
        </a-select>
      </a-form-item>
      {{ form }}
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { addMatch, MatchDTO } from '@/api/match';
  import { getRaceList } from '@/api/race';
  import { ref } from 'vue';

  type Action = 'add' | 'edit';
  const emits = defineEmits(['update:show']);
  const props = defineProps<{
    action: Action;
    show: boolean;
    match?: MatchDTO;
  }>();
  const form = ref({
    integralDis: [
      {
        integral: 0,
        ranking: 0,
      },
    ],
  } as MatchDTO);
  const raceList = ref(new Map<number, string>());

  if (props.action === 'edit' && props.match) {
    console.log(props.match);
  }

  const handleOk = () => {
    console.log(form.value); // TODO
    addMatch(form.value);
    emits('update:show', false);
  };

  getRaceList().then((res) => {
    res.data.records.forEach((r: any) => {
      raceList.value.set(r.raceItemId, r.raceItemName);
    });
  });
</script>
